<!DOCTYPE html>
<html>

<head>

    <!-- 
     .stop
     .prevent
     .capture
     .self
     .once
     .passive -->

    <meta charset="UTF-8">

    <title>Document</title>
    <!-- 导入vue.js -->
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <div id="app">
        <!-- 阻止单击事件继续传播 冒泡 -->
        <div @click="doThis($event,'123')">父容器
            <div @click.stop="doThis($event,'123')">子容器</div>
        </div>

        <!-- 提交事件不再重载页面 阻止默认事件 拦截自己的引发的事件-->
        <a href="http://www.baidu.com" v-on:click.prevent="doThis">Click me</a>

        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThis"></a>

        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>

        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 capture修饰理解成隧道事件 此处点击obj4 先执行doThis =》doThis1=》doThis3》=doThis2-->
        <div v-on:click.capture="doThis">obj1
            <div @click.capture="doThis1">obj2
                <div @click="doThis2">obj3
                    <div @click="doThis3">obj4
                    </div>
                </div>
            </div>
        </div>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div v-on:click.self="doThat">...</div>
        <!-- 常规写法 -->
        <button v-on:click="showInfo1">点我</button>
        <!-- 简写 传参-->
        <button @click.once="showInfo2($event,'123')">点我</button>
    </div>


    <script type="text/javascript">

        var app = new Vue({
            // 绑定到元素
            el: '#app',
            data: {
                message: 'Hello Vue'
            },
            // lamada表达式中this指向
            methods: {
                doThis(e, str) {
                    console.log(e.target);
                    console.log('测试冒泡事件是否被拦截');
                },
                doThis1() {
                    console.log('测试冒泡事件是否被拦截1');
                },
                doThis2() {
                    console.log('测试冒泡事件是否被拦截2');
                },
                doThis3() {
                    console.log('测试冒泡事件是否被拦截3');
                },
                showInfo1: () => {
                    console.log(this.app);
                    this.app.message = '你被我修改啦1'
                },
                showInfo2(a, b, c) {
                    alert(b);
                    console.log(a, b, c);
                    this.message = '你被我修改啦2'
                }
            }
        });

    </script>
</body>

</html>